<template>
  <div class="card-list-wrap">
    <h2>🥇友情链接</h2>
    <div class="card-box">
      <div class="card-item" v-for="item in linkList" :key="item.id">
        <div class="card-content" @click="goToLink(item)">
          <img class="card-logo" v-lazy="item.logo" />
          <div class="card-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useLinkList } from "./hooks/useLinkList";
const { linkList, goToLink } = useLinkList();
</script>
<style lang="scss" scoped>
.card-list-wrap {
  .card-box {
    display: flex;
    flex-wrap: wrap;
    .card-item {
      padding: 20px;
      .card-content {
        cursor: pointer;
        .card-logo {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
        .card-name {
          text-align: center;
          &:hover {
            color: #1e71ff;
          }
        }
      }
    }
  }
}
</style>
